<template>
  <div class="addressAll" :class="{'noAddress':addressList.length===0}">
    <div v-if="addressList.length>0" class="addressItemDivAllList">
      <address-item :addressItemList="addressList"></address-item>
    </div>
    <div v-else class="lackAddressPage">
      <div class="lackAddressPageTxt">
        <div><img src="/static/images/lack/lackAddress.png"></div>
        <p>暂无收货地址~</p>
      </div>
    </div>
    <div class="addressFooter" @click="toAddAddress">
      <p>新增收货地址</p>
    </div>
  </div>
</template>

<script>
  import addressItem from '@/components/address/address-item'
  import {mapGetters} from 'vuex'
  export default {
    components: {
      addressItem
    },
    computed : {
      ...mapGetters({
        addressList: 'addressList',//地址列表
      }),
    },
    onShow(){
      this.$http.get('address/findAll').then((data)=>{ //这里初始化地址列表
        console.log('支付页面的地址',data.data.data)
        if(data.data.data){
          this.$store.dispatch("getAddresses",data.data.data)
        }
      })
    },
    methods: {
      toAddAddress (){
        //点击新增地址的时候让编辑地址初始化
        this.$store.dispatch("editAddressInit")
        const url = "../add-address/main";
        wx.navigateTo({ url })
      }
    }
  }
</script>

<style scoped>
div.addressList{
  background: #fff;
  margin-bottom: 20rpx;
}
.addressAll .addressItemDivAllList{
  margin-bottom: 105rpx;
}
.addressAll{
  background: #efeff4;
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0;
  border-top: 1rpx solid #efeff4;
}
.addressAll.noAddress{
  background: #efeff4;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  border-top: 1rpx solid #efeff4;
}
.lackAddressPage{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lackAddressPage .lackAddressPageTxt div{
  width: 140rpx;
  height: 148rpx;
  margin: 0 auto;
}
.lackAddressPage .lackAddressPageTxt div img{
  width: 100%;
  height: 100%;  
}
.lackAddressPage .lackAddressPageTxt p{
  text-align: center;
  font-size: 30rpx;
  color: #adadad;
  margin-top: 25rpx;
}
.addressFooter{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 85rpx;
  background: #e1c7d2;
  font-size: 34rpx;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
